<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<html>
	<head>
		<%--

		<script type="text/javascript"
			src="<c:url value='/ext/scripts/jquery/jquery-1.6.1.js'/>">
</script>

		--%>
		<script type="text/javascript"
			src="<c:url value='/ext/scripts/realtime/excanvas.min.js'/>">
</script>
		<script type="text/javascript"
			src="<c:url value='/ext/scripts/realtime/jquery.flot.js'/>">
</script>
		<script type="text/javascript"
			src="<c:url value='/ext/scripts/realtime/jquery.angela.min.js'/>">
</script>
		<script type="text/javascript"
			src="<c:url value='/ext/scripts/realtime/highcharts.js'/>">
</script>

		<style>
.p_us {
	width: 82%;
	font-size: 12px;
	background: url(../../images/dian_pus.gif) no-repeat left 8px;
	padding-left: 8px;
	color: #ff5500;
	line-height: 18px;
	padding-bottom: 3px;
}

.p_us b {
	color: #556082;
	font-size: 12px;
	font-weight: normal;
	display: inline;
}
</style>
		<script type="text/javascript">
function hiddenselectconbyid(divid) {
	if ($(divid).style.display == 'none') {
		$(divid).style.display = '';
	} else {
		$(divid).style.display = 'none';
	}
}
</script>

		<%--<link rel="stylesheet" type="text/css" media="all"
			href="<c:url value='/ext/styles/realtime/jquery.angela.min.css'/>" />
		<link rel="stylesheet" type="text/css" media="all"
			href="<c:url value='/ext/styles/blueframe/page.css'/>" />


	--%>
	</head>
	<script type="text/javascript">
<%--
jQuery(function() {

	function test() {
		//alert(0);
		jQuery.post("ajaxuser.html", {
			str : ''
		}, function(data) {
			jQuery.each(data.ingredients.userlist, function(idx, item) {

				alert(idx + item);

			});
		}, 'JSON');

		jQuery.post("realtime.html", {
			str : ""
		}, function() {

		}, 'JSON');
		setTimeout(test, 1000);
	}

	setTimeout(test, 1000);

});
--%></script>


	<script type="text/javascript">
jQuery(function() {
	var datastr = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ], totalPoints = 10;
	//声明报表对象  

	function getForm() {

		var yAxisMax=20;
		for ( var i = 0; i < datastr.length; i++) {
			if(datastr[i]>20){
				yAxisMax =100;
			}
			if(datastr[i]>50){
				yAxisMax =500;
			}
			
		}
		
		
		var chart = new Highcharts.Chart( {

			chart : {
				//将报表对象渲染到层上  
			renderTo : 'container'
		},
		//设定报表对象的初始数据  
			series : [ {
				data : datastr
			} ],
			yAxis : {
				title : {
					text : null
				},
				labels : {
					formatter : function() {
						return (Math.abs(this.value));
					}
				},
				min : 0,
				max : yAxisMax-0
			}
		});

		//alert(1);
		if (datastr.length > 0)
			datastr = datastr.slice(1);
		// do a random walk

		/* 动态用户个数的值 */
		var prev = datastr.length > 0 ? datastr[datastr.length - 1] : 50;
		//后台返回值 
		jQuery.post("realtime.html", {
			str : "111"
		}, function(data) {
			try {
				//alert(data);
				jQuery.each(data.ingredients, function(idx, item) {
					//alert(item);

						datastr.push(item - 0);
						//alert(item);
						chart.series[0].setData(datastr);
						//alert(idx+item);
						if (idx == 0) {
							return true;//同countinue，返回false同break      
						}
					});
			} catch (e) {
				alert("Error in XML response:" + e);
			}
		}, 'JSON');

		//使用JQuery从后台获取JSON格式的数据  
		/**
		jQuery.getJSON('http://localhost:8080/JQueryPIC/ajax', null, function(
				data) {
			//为图表设置值  
				chart.series[0].setData(data);
			});**/
		jQuery("#tbody tr[id='trid']").remove();

		/* 动态list的值  */
		jQuery.post("ajaxuser.html", {
			str : ''
		}, function(data) {

			jQuery.each(data, function(idx, item) {

				var table1 = jQuery('#table1');
				var firstTr = table1.find('tbody>tr:first');
				var row = jQuery("<tr id ='trid' ></tr>");

				//alert(idx + item);
					jQuery.each(item, function(idx_key, item_value) {
						//alert(idx_key+"----"+item_value);
							if (idx_key == 'username') {
								var username = jQuery("<td>" + item_value
										+ "</td>");
								row.append(username);
							}
							if (idx_key == 'realname') {
								var realname = jQuery("<td>" + item_value
										+ "</td>");
								row.append(realname);
							}

							if (idx_key == 'company') {
								var company = jQuery("<td>" + item_value
										+ "</td>");
								row.append(company);
							}
							if (idx_key == 'address') {
								var address = jQuery("<td>" + item_value
										+ "</td>");
								row.append(address);
							}
							if (idx_key == 'ipaddress') {
								var ipaddress = jQuery("<td>" + item_value
										+ "</td>");
								row.append(ipaddress);
							}

							//alert(idx1 +'  -----   '+item1);
						});
					table1.append(row);

				});
		}, 'JSON');
	}

	// 更新时间间隔设置 
	var updateInterval = 5000;
	jQuery("#updateInterval").val(updateInterval).change(function() {
		var v = jQuery(this).val();
		if (v && !isNaN(+v)) {
			updateInterval = +v;
			if (updateInterval < 1000)
				updateInterval = 1000;
			if (updateInterval > 5000)
				updateInterval = 5000;
			jQuery(this).val("" + updateInterval);
		}
	});

	function update() {

		setTimeout(update, updateInterval);
		getForm();
	}

	jQuery(document).ready(function() {

		//每隔3秒自动调用方法，实现图表的实时更新  
			//window.setInterval(getForm, 3000);
			update();
		});

});
</script>

	<body>
		<div id="content">
			<div class="box_big">

				<div onclick="hiddenselectconbyid('first');" class="bj_biao">
					<h4>
						用户实时监控图形
					</h4>

				</div>
				<div id='first'>
					<div id="container" style="width: 90%"></div>

					<p></p>
					<div class="cx_act">


						<p class="p_us">
							<font>更新间隔(1000-5000ms):</font>
							<input id="updateInterval" type="text" value=""
								style="text-align: right; width: 5em" />
							<font>毫秒</font>
						</p>

					</div>

					<input id="divwid" type="hidden" value="90%" />
					<input id="divhei" type="hidden" value="400" />
					<input id="newdata" type="hidden" value="" />
				</div>

				<div onclick="hiddenselectconbyid('end');" class="bj_biao">
					<h4>
						用户实时监控表格
					</h4>
				</div>


				<div id='end' class="ceng_mar5">
					<table id="table1" width="100%" class="table_cx" border="0"
						cellspacing="0" cellpadding="0">
						<tbody id="tbody">
							<tr>

								<th>
									<p style="border-left: 1px solid #feb808;">
										用户名
									</p>
								</th>
								<th>
									地址
								</th>
								<th>
									公司
								</th>
								<th>
									真实姓名
								</th>
								<th>
									<p style="border-left: 1px solid #feb808;">
										IP地址
									</p>
								</th>
							</tr>
						</tbody>
					</table>
				</div>

			</div>
		</div>


		<input id="usersum" disabled type="hidden" value="用户数" />
		<input id="usersumall" disabled type="hidden" value="用户个数" />
		<input id="istimestmp" disabled type="hidden" value="时间轴" />
		<input id="ishidden" disabled type="hidden" value="隐藏" />

	</body>
</html>
